<template>
  <div>
    <ul class="AlbumBox">
      <router-link
        tag="li"
        :to="{
          name: 'album',
          query: { id: item.id, uid: $route.query.id },
        }"
        class="AlbumItem"
        v-for="item in hotAlbums"
        :key="item.id"
      >
        <div class="imgBox">
          <img :src="item.picUrl" alt="" />
          <div class="bgBox"></div>
        </div>
        <p class="AlbumName">{{ item.name }}</p>
        <p class="AlbumTime">{{ item.publishTime | fmtDate("yyyy.MM.DD") }}</p>
      </router-link>
    </ul>
    <div class="pageBox">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totol"
        :page-size="limit"
        :current-page.sync="page"
        :hide-on-single-page="true"
        @current-change="getData"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getAlbum } from "@/api";
export default {
  data() {
    return {
      limit: 12,
      totol: 0,
      hotAlbums: [],
      page: 1,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      getAlbum({
        id: this.$route.query.id,
        limit: this.limit,
        offset: (this.page - 1) * this.limit,
      }).then((res) => {
        this.totol = res.artist.albumSize;
        this.hotAlbums = res.hotAlbums;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.AlbumBox {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0 0 -18px;
  .AlbumItem {
    width: 145px;
    padding-left: 18px;
    margin-top: 20px;
    .imgBox {
      width: 120px;
      height: 120px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      .bgBox {
        width: 145px;
        height: 120px;
        background: url("./../../assets/imges/background.png") no-repeat 0 -56px;
        background-position: -170px -850px;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .AlbumName {
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 19px;
      font-size: 14px;
      margin: 8px 0 3px;
      white-space: nowrap;
    }
    .AlbumTime {
      color: #666;
    }
  }
}
.pageBox {
  margin: 20px 0;
  text-align: center;
}
</style>